<script setup>
    import { onMounted, onUnmounted } from "vue";
    import AMapLoader from "@amap/amap-jsapi-loader";

    let map = null;


    onMounted(() => {
        window._AMapSecurityConfig = {
                securityJsCode: "3e5ce173ac4c474a86b76b6c8d33787d", // 密钥
            };	// 重要！
        AMapLoader.load({
            key: "a399286838858c1da660436336e9701b", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then((AMap) => {
                map = new AMap.Map('container', {
                    // 设置地图容器id
                    viewMode: "2D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [108.36637, 22.817746], // 初始化地图中心点位置
                });
            })
            .catch((e) => {
                console.log(e);
            });
    });

    onUnmounted(() => {
        map?.destroy();
    });
</script>

<template>
    <div id="container"></div>
</template>

<style scoped>
    #container {
        width: 100%;
        height: 400px;
    }
</style>